<template>
	<view>
		<block v-if="order.length > 0">
			<u-text text="礼物清单" align="center" size="16" lineHeight="50"></u-text>
			<u-row customStyle="margin-bottom:15px">
				<u-col span="3">
					<u-text text="粉丝" size="12" color="#7A848B"></u-text>
				</u-col>
				<u-col span="7">
					<u-text text="礼物" size="12" color="#7A848B"></u-text>
				</u-col>
				<u-col span="2">
					<u-text text="票数" align="right" size="12" color="#7A848B"></u-text>
				</u-col>
			</u-row>

			<scroll-view scroll-y style="height: 150px;">
				<u-row v-for="(item, index) in order" :key="index" customStyle="margin-bottom:15px">
					<u-col span="3">
						<u-text :text="item.nickname" lines="1" size="26rpx" color="#7A848B"></u-text>
					</u-col>
					<u-col span="7">
						<u-text :text="item.name" :prefixIcon="imgUrl + item.image" size="26rpx" color="#7A848B"
							lines="2" iconStyle="width:35px;height:35px;border-radius:50%;margin-right:20rpx;"></u-text>
					</u-col>
					<u-col span="2">
						<u-text :text="item.num" align="right" color="#7A848B" size="26rpx"></u-text>
					</u-col>
				</u-row>
			</scroll-view>
		</block>
		<view v-else class="nogift">TA还没有获得过礼物哦~</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				imgUrl: 'common/cdnurl',
			})
		},
		name: 'order',
		props: {
			order: {}
		},
		data() {
			return {};
		},
		created() {},

		methods: {}
	};
</script>

<style>
	.nogift {
		font-size: 14px;
		color: #c5c5c5;
		text-align: center;
		margin: 40rpx 0px;
	}
</style>
